<template>
  <Component ref="refComponent" :is="realComponent" :data="data" :field="field"/>
</template>

<script setup>
import ListColumnComponents from '@/components/form/ListColumnComponents';
import {defineProps, shallowRef, watchEffect} from 'vue';
import {isNotEmpty} from '@/utils/CommonUtils';

const props = defineProps({
  field: undefined,
  component: undefined,
  data: undefined,
});
const realComponent = shallowRef();

watchEffect(() => {
  if (isNotEmpty(props.component) && isNotEmpty(ListColumnComponents[props.component])) {
    realComponent.value = ListColumnComponents[props.component];
  } else {
    realComponent.value = undefined;
  }
});
</script>
